<template>
  <div>
    <userItem></userItem>
    <asideRouteStudent current-page="2-3"></asideRouteStudent>
    <div id="main">
      <el-table
          :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()) || data.teacher.toLowerCase().includes(search.toLowerCase())|| data.limitdate.toLowerCase().includes(search.toLowerCase()))"
          style="width: 100%" stripe border max-height="400" size="big" fit empty-text="暂无数据">
        <el-table-column
            label="课程名称"
            prop="name" sortable="true">
        </el-table-column>
        <el-table-column
          label="任课老师"
          prop="teacher" sortable="true" sort-by="number">
      </el-table-column>
        <el-table-column
            label="截止日期"
            prop="limitdate" sortable="true" sort-by="date">
        </el-table-column>
        <el-table-column
            label="当前人数"
            prop="number" sortable="true" sort-by="number">
        </el-table-column>
        <el-table-column
            label="学分"
            prop="score" sortable="true" sort-by="number">
        </el-table-column>
        <el-table-column
            align="left"
            width="154px"
        >
          <template slot="header" slot-scope="scope">
            <el-input
                v-model="search"
                size="mini"
                placeholder="搜索名称/教师/日期"
            />
          </template>
          <template slot-scope="scope" style="display: inline-flex">
            <el-button
                size="mini"
                @click="handleDetail(scope.$index, scope.row)" type="warning"  plain >信息</el-button>
            <el-button
                size="mini"
                @click="addCourse(scope.$index, scope.row)" plain  circle icon="el-icon-circle-check"></el-button>
            <el-button
                size="mini"
                @click="dropCourse(scope.$index, scope.row)"  type="danger" circle icon="el-icon-error"></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div>
      <el-dialog
          title="详细信息"
          :visible.sync="dialogVisible"
          width="30%">
        <span>{{intro}}</span><br>
        <span>每周上课时间是：{{currday}}</span>
        <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import userItem from "../components/userItem";
import asideRouteStudent from "../components/asideRouteStudent";
import request from "../../utils/request";
import * as list from "core-js";

export default {
  name: "CourseChoosing",
  components:{
    userItem,
    asideRouteStudent,
  },
  data() {
    let user=JSON.parse(sessionStorage.getItem("user"));
    request.post("/api/course/getAllCourse").then(res=>{
      console.log(res);
      this.tableData=res.data;//这里data是“课程数组”的数组，包括所有课程
      for(let i=0;i<this.tableData.length;i++){
        this.choose[i]="false";
      }request.post("/api/selectandgrade/stuquery",user).then(res=>{
        console.log(res);
        this.itemData=res.data;
        for(let i = 0;i<this.itemData.length;i++){
          let isfind=false;
          let index=0;
          while(!isfind&&index<this.tableData.length){
            if(this.tableData[index].name===this.itemData[i].course){
              isfind=true;
              this.choose[i]="true";
              return;
            }
            index++;
          }
        }
      });
    });

    return {
      search:'',
      tableData:[],
      itemData:[],
      dialogVisible:false,
      currday:'',
      course:{
        id:'',
        name:'',
        teacher:'',
        limiteate:'',
        intro:'',
        number:'',
        time:'',
        score:'',
      },
      item:{
        course:'',
        teacher:'',
        student:'',
        grade:'',
        id:'',
        time:'',
      },
      choose:[],
    }
  },
 methods:{
   handleDetail(index, row) {
     console.log(index, row);
     this.intro=this.tableData.filter(data => !this.search || data.name.toLowerCase().includes(this.search.toLowerCase()) || data.teacher.toLowerCase().includes(this.search.toLowerCase())|| data.limitdate.toLowerCase().includes(this.search.toLowerCase()))[index].intro;
     this.currday=this.tableData.filter(data => !this.search || data.name.toLowerCase().includes(this.search.toLowerCase()) || data.teacher.toLowerCase().includes(this.search.toLowerCase())|| data.limitdate.toLowerCase().includes(this.search.toLowerCase()))[index].time;
     this.dialogVisible=true;
   },
   addCourse(index,row){
     let user=JSON.parse(sessionStorage.getItem("user"));
     this.item.course=this.tableData.filter(data => !this.search || data.name.toLowerCase().includes(this.search.toLowerCase()) || data.teacher.toLowerCase().includes(this.search.toLowerCase())|| data.limitdate.toLowerCase().includes(this.search.toLowerCase()))[index].name;
     this.item.student=user.name;
     this.item.teacher=this.tableData.filter(data => !this.search || data.name.toLowerCase().includes(this.search.toLowerCase()) || data.teacher.toLowerCase().includes(this.search.toLowerCase())|| data.limitdate.toLowerCase().includes(this.search.toLowerCase()))[index].teacher;
     this.item.grade=0;
     this.item.time=this.tableData.filter(data => !this.search || data.name.toLowerCase().includes(this.search.toLowerCase()) || data.teacher.toLowerCase().includes(this.search.toLowerCase())|| data.limitdate.toLowerCase().includes(this.search.toLowerCase()))[index].time;
     console.log("开始发送消息...")
     this.course=this.tableData.filter(data => !this.search || data.name.toLowerCase().includes(this.search.toLowerCase()) || data.teacher.toLowerCase().includes(this.search.toLowerCase())|| data.limitdate.toLowerCase().includes(this.search.toLowerCase()))[index];
     request.post("api/course/queryDate",this.course).then(res=> {
       console.log(res)
       if (res.code === "-1") {
         this.$message({
           message: '该课程已截止选课！！',
           type: 'error'
         });
       } else {
         request.post("api/selectandgrade/selectcourse",this.item).then(res => {
           console.log(res)
           if (res.code === "-1") {
             this.$message({
               message: '您已经选择过该课程！',
               type: 'error'
             });
           } else {
             if(res.code==="-2"){
             this.$message({
               message: '选课时间冲突！',
               type: 'error'
             });
           }else{
               this.course = this.tableData.filter(data => !this.search || data.name.toLowerCase().includes(this.search.toLowerCase()) || data.teacher.toLowerCase().includes(this.search.toLowerCase())|| data.limitdate.toLowerCase().includes(this.search.toLowerCase()))[index];
               this.course.number++;
               request.put("api/course/upload", this.course)
               this.$message({
                 message: '选课成功!',
                 type: 'success'
               });
             }
           }
         })
       }
     })
   },
   dropCourse(index,row){
     let user=JSON.parse(sessionStorage.getItem("user"));
     this.course=this.tableData.filter(data => !this.search || data.name.toLowerCase().includes(this.search.toLowerCase()) || data.teacher.toLowerCase().includes(this.search.toLowerCase())|| data.limitdate.toLowerCase().includes(this.search.toLowerCase()))[index];
     this.item.course=this.tableData.filter(data => !this.search || data.name.toLowerCase().includes(this.search.toLowerCase()) || data.teacher.toLowerCase().includes(this.search.toLowerCase())|| data.limitdate.toLowerCase().includes(this.search.toLowerCase()))[index].name;
     this.item.student=user.name;
     this.item.teacher=this.tableData.filter(data => !this.search || data.name.toLowerCase().includes(this.search.toLowerCase()) || data.teacher.toLowerCase().includes(this.search.toLowerCase())|| data.limitdate.toLowerCase().includes(this.search.toLowerCase()))[index].teacher;
     this.item.grade=0;
     console.log("开始发送消息...")
     request.post("api/course/queryDate",this.course).then(res=>{
       if (res.code ==="-1") {
         this.$message({
           message: '选课时间已过，无法退选！！',
           type: 'error'
         });
       }else{
         request.post("api/selectandgrade/dropcourse",this.item).then(res=>{
               console.log(res)
               if(res.code==="-1"){
                 this.$message({
                   message: '您还未选择该课程！',
                   type: 'error'
                 });
               }else{
                 this.course=this.tableData.filter(data => !this.search || data.name.toLowerCase().includes(this.search.toLowerCase()) || data.teacher.toLowerCase().includes(this.search.toLowerCase())|| data.limitdate.toLowerCase().includes(this.search.toLowerCase()))[index];
                 this.course.number--;
                 request.put("api/course/upload",this.course)
                 this.$message({
                   message: '退课成功!',
                   type: 'success'
                 });
               }
             }
         )
       }
     })

   },
 }
}
</script>

<style scoped>
#main{
  position:absolute;
  right: 16%;
  width: 62%;
  margin-top: 50px;
  z-index: -1;
  margin-bottom: 20px;
}
</style>
